<template>
  <div class="menuBox">
    <div class="topMenu">
      <li class="topBox" v-for="(item, index) in menu">
        {{ item.name }}
      </li>
    </div>
    <div class="bottomMenu">
      <li v-for="(item, index) in secondMenu">
        <div class="bottomBox">
          <div class="bottomImg">
            <img v-if="item.icon"  :src="getIconPath(`${item.icon}`)"   class="ico" alt="">
          </div>
          <div class="bottomTitle">{{ item.name }}</div>
        </div>
      </li>
    </div>
  </div>
</template>
<script  scope setup>
import {
  ref,
  onMounted,
  onBeforeUnmount,
  reactive,
  defineProps,
  defineEmits
} from "vue";
import menuData from "@/assets/js/data/menuData";

//组件引用

//定义变量
const menuOption = ref([]);
const menuFlag = ref(null);

const menu = ref([]);
const secondMenu = ref([])
const setMenuStart = () => {
  menu.value = menuData.mapMenu;

  secondMenu.value = menu.value[0].children;
  debugger
};
const getIconPath=(iconName)=>{
  return iconName ? require("@/assets/image/" + iconName) : ''
}
//页面初始化后方法
onMounted(() => {
  setMenuStart();
});
</script>
    
<style scoped lang="less">
.menuBox {
  width: 100%;
  height: 100%;
  background: #474747;

  li {
    list-style: none;
  }

  .topMenu {
    width: 100%;
    display: flex;



    li:hover {
      color: white;
      cursor: pointer;
    }

    .topBox {
      font-size: 14px;
      font-family: Source Han Sans SC;
      padding: 2px 15px;
      color: #e7e1e1
    }
  }

  .bottomMenu {

    width: 100%;
    font-size: 12px;
    font-family: Source Han Sans SC;
    color: white;
    display: flex;

    align-items: center;

    .bottomBox {
      padding: 2px 15px;

      .bottomImg {
        width: 100%;
        height: 20px;
        display: flex;
        justify-content: center;
 
        .ico {
          width: 20px;
          height: 20px;
        }
      }

      .bottomTitle {
        width: 100%;
      }
    }

    li:hover {
      color: skyblue;
      cursor: pointer;
    }

  }

}
</style>